<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>520love朱源</title>
    <link rel="stylesheet" href="css/jquery.fullpage.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="style/reset.css">
	<link rel="stylesheet" type="text/css" href="style/index.css">
	<link rel="stylesheet" type="text/css" href="style/pageA.css">
	<link rel="stylesheet" type="text/css" href="style/pageB.css">
    <link rel="stylesheet" type="text/css" href="style/pageC.css">
    <link rel="stylesheet" type="text/css" href="css/qrj.css">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="./renxi/default.css">
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
    <script type="text/javascript" src="./renxi/jscex.min.js"></script>
    <script type="text/javascript" src="./renxi/jscex-parser.js"></script>
    <script type="text/javascript" src="./renxi/jscex-jit.js"></script>
    <script type="text/javascript" src="./renxi/jscex-builderbase.min.js"></script>
    <script type="text/javascript" src="./renxi/jscex-async.min.js"></script>
    <script type="text/javascript" src="./renxi/jscex-async-powerpack.min.js"></script>
    <script type="text/javascript" src="./renxi/functions.js" charset="utf-8"></script>
    <script type="text/javascript" src="./renxi/love.js" charset="utf-8"></script>
    <script src="js/lib/jquery.fireworks.js" type="text/javascript"></script>
    <style type="text/css">
        /* *{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-box-sizing: border-box; box-sizing: border-box; }
        html{ width: 100%; height: 100%; }
        body{ max-width: 600px; margin: 0 auto; background: #0b3443; color: #f0f0f0;} */
        .share_img{ width: 0; height: 0; overflow: hidden; opacity: 0; }
        .content2{ padding: 80px 20px;}
        .text_wrapper{ display: -webkit-box; display: flex; }
        .text_wrapper .text{ padding-top: 20px; padding-left: 20px; }
        .hide{ display: none !important; }
        p{ margin: 0; }
        .btn-groups{ padding-right: 20px; text-align: center;display: none;}
        .heart-btn{ display: inline-block; animation: breath 0.8s linear 0s infinite both; -webkit-animation: breath 0.8s linear 0s infinite both; }
        .btn{ position: relative; display: inline-block; width: 60px; height: 60px; margin: 0 30px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
        .btn span{ display: block; width: 100%; height: 100%; line-height: 60px; margin-top: -10px; margin-left: -10px; text-align: center; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
        .btn-a{ background:red; }
        .btn-b{ background: #c9c9c9; }
        .btn-a:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background:red; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
        .btn-a:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: red; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;}
        .btn-b:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #c9c9c9; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
        .btn-b:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #c9c9c9; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;}
        .container2{  }
        .container2 .mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); }
        .container2 .modal{ width: 80%; height: 160px; position: absolute; top: 50%; left: 50%; padding: 20px 15px; border-radius: 5px; transform: translate(-50%, -70%); -webkit-transform: translate(-50%，-70%); background: #f3f3f3;}
        .container2 .modal p{ margin-top: 20px; margin-bottom: 20px; font-size: 16px; color: #353535; text-align: center;}
        .confirm{ display: block; width: 120px; height: 40px; margin: 0 auto; border: none; font-size: 16px; border-radius: 5px; color: #ffffff; background: #f45cae; }
        .type_words{ padding: 12px 20px; }
        .qidai{
            display: inline-block;
            margin: auto;
            text-align: center;
            font-size: 50px;
            display: none;
            height: 200px;
        }
        .putqidai{
            text-align: center;
            top: 400px;
            position: absolute;
            left: 50%;
            width: 1000px;
            margin-left: -500px;
        }
        @keyframes breath {
            0% {
                transform: scale3d(1,1,1);
                -webkit-transform: scale3d(1,1,1);
                transform-origin: 50% 50%;
            }
            50%{
                transform: scale3d(1.02,1.02,1.02);
                -webkit-transform: scale3d(1.02,1.02,1.02);
                transform-origin: 50% 50%;
            }
            100%{
                transform: scale3d(1,1,1);
                -webkit-transform: scale3d(1,1,1);
                transform-origin: 50% 50%;
            }
        }
    </style>
        
</head>
<body>

<!--整体容器-->
<!--1.指示器 点容器-->
<div class="container">
    <!--每一个切换的屏幕 背景-->
    <div class="section screen01">
        <div class="bgcontent1">
            <div id="content">
                <ul class="content-wrap">
                    <!-- 第一幅图 -->
                    <li>
                        <div class="a_background">
                            <div class="a_background_top"></div>
                            <div class="a_background_middle"></div>
                            <div class="a_background_botton"></div>
                        </div>
                        <div id="sun"></div>
                        <div class="cloudArea">
                            <div class="cloud cloud1"></div>
                            <div class="cloud cloud2"></div>
                        </div>
                    </li>
                    <!-- 第二幅图 -->
                    <li>
                        <!-- 背景图 -->
                        <div class="b_background"></div>
                        <div class="b_background_preload"></div>
                        <!-- 商店 -->
                        <div class="shop">
                            <div class="door">
                                <div class="door-left"></div>
                                <div class="door-right"></div>
                            </div>
                            <!-- <button id="open">open</button>
                            <button id="close">close</button> -->
                            <!-- 灯 -->
                            <div class="lamp"></div>
                        </div> 
                        <div class="bird">
                            
                        </div>
                    </li>
                    <!-- 第三幅图 -->
                    <li>
                        <!-- 背景图 -->
                        <div class="c_background">
                            <div class="c_background_top"></div>
                            <div class="c_background_middle"></div>
                            <div class="c_background_botton"></div>
                        </div>
                        <!-- 小女孩 -->
                        <div class="girl"></div>
                        <!-- 水波 -->
                        <div class="bridge-bottom">
                            <div class="water">
                                <div id="water1" class="water_1"></div>
                                <div id="water2" class="water_2"></div>
                                <div id="water3" class="water_3"></div>
                                <div id="water4" class="water_4"></div>
                            </div>
                        </div>
                        <!-- 星星 -->
                        <ul class="stars">
                            <li class="stars1"></li>
                            <li class="stars2"></li>
                            <li class="stars3"></li>
                            <li class="stars4"></li>
                            <li class="stars5"></li>
                            <li class="stars6"></li>
                        </ul>
                        <div class="logo">
                            
                        </div>
                    </li>
                </ul>
                <div id="snowflake">
                </div>
            </div>
            <div id="boy" class="character">	
            </div>
            <button id="btn">
                let liuzh go
            </button>
        </div>
    </div>
    <!--第二屏  动画特点：完全进入当前屏的时候执行动画-->
    <!--1.什么时候完全进入-->
    <!--2.怎么做动画  给大容器追加一个类  在这个类下面可以给需要做动画的元素添加动画属性-->
    <div class="section screen02">
        <div class="content" style="bottom: auto;">
            <audio autoplay="autopaly">
                <source src="renxi.mp3" type="audio/mp3" />
            </audio>
            <div id="main">
                <div id="wrap">
                    <div id="text">
                        <div id="code"> <font color="#FF0000">
                            <span class="say">亲爱的源儿啊，今天是520，是时候来一次表白了</span><br>
                            <span class="say"> </span><br>
                            <span class="say"> 我知道我不会甜言蜜语，但是我会用行动证明一切</span><br>
                            <span class="say"> </span><br>
                            <span class="say">你说我情商不高，实际是偶偶有点反应迟钝</span><br>
                            <span class="say">日常中的每一次接触，一举一动，一言一行，我都会想</span><br>
                            <span class="say">你会不会有什么暗示，或是我有什么做的不对的地方</span><br>
                            <span class="say">每天都想问，你会钟意我吗？</span><br>
                            <span class="say"> </span><br>
                            <span class="say">或许我们认识的时间确实不长，而且还是父母的介绍</span><br>
                            <span class="say">但是目前的我来看，我是喜欢你的，我想把这份感情有始有终</span><br>
                            <span class="say">我会好好减肥，保持健康的体格！！！</span><br>
                            <span class="say">我要努力上进，找到个不错的工作！！！</span><br>
                            <span class="say">我会负起责任，学会做一个合格的家庭成员！！！</span><br>
                            <span class="say"> </span><br>
                            <span class="say"><span class="space"></span> -- 爱你的刘卓--</span> </font>
                            </p>
                        </div>
                    </div>
                    <div id="clock-box">
                        <span class="STYLE1"></span><font color="#33CC00">亲爱的朱源，这是我和你遇见的时间</font> <span class="STYLE1">已经是……</span>
                        <div id="clock"></div>
                    </div>
                    <canvas id="canvas" widt    h="1100" height="680"></canvas>
                </div>
            </div>
        </div>
    </div>
    <!--active 默认显示的页面-->
    <div class="section screen03">
        <iframe src="./hudie/index.html" style="position: absolute;width:100%;height:100%;"></iframe>
        <div class="content" style="bottom: auto;position: relative;left: 0;margin-left:0;width: 100%;">
            <div class="share_img"><img src="images/a8b.png" alt=""></div>
            <div class="page_one">
                <div class="content2" style="width: 50%;">
                    <div class="text_wrapper">
                        <img src="images/haixiu.jpg" width="200" alt="">
                        <div class="text">
                            :源儿啊，看完了我的520表白，你愿意做我女朋友吗？我能大大方方的和别人讲你是我女朋友吗？
                        </div>
                    </div>
                </div>
                <div class="view-top">
                    <div class="heart-vt">
                      <div id="valentine">
                        <div class="shake">
                            <div class="rope"></div>
                            <div class="heart-wrap">
                                <img src="images/loveb.png" class="heart">
                                <img src="images/loves.png" class="beat">
                            </div>
                        </div>
                        <div class="tiny"></div>
                        <div class="close">&times;</div>
                      </div>
                    </div>
                </div>
                <div class="btn-groups">
                    <div class="heart-btn">
                        <div id="yes" class="btn btn-a"><span>愿意</span></div>
                    </div>
                    <div id="no" class="btn btn-b"><span>不愿意</span></div>
                </div>
            </div>
            <div class="page_two hide">
                <div class="type_words"></div>
            </div>
        </div>
    </div>
    <div class="section screen04">
        <div class="content" style="bottom: auto;">
        </div>
        <div class="putqidai">
            <span class="qidai">在我爱你的基础上还要打个十分</span><br/>
            <span class="qidai">5.30是你的生日</span><br/>
            <i class="qidai">敬请期待！！！</i>
        </div>
        
    </div>
    <div class="section screen05">
        <div class="content">
            <div class="star">
                <img src="images/07-star.png" alt="">
                <img src="images/07-star.png" alt="">
                <img src="images/07-star.png" alt="">
                <img src="images/07-star.png" alt="">
                <img src="images/07-star.png" alt="">
            </div>
            <div class="text"><img src="images/07-text.png" alt=""></div>
            <div class="again"><img src="images/08-again.png" alt=""></div>
        </div>
        
    </div>
</div>
<!-- <script src="js/jquery.min.js"></script> -->
<script src="js/jquery.fullpage.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript" src="js/swipe.js"></script>
	<script type="text/javascript" src="js/index2.js"></script>
	<script type="text/javascript" src="js/boyWalk.js"></script>
    <script type="text/javascript" src="js/jqueryTransit.js"></script>
    <script type="text/javascript" src="js/qrj.js"></script>

	<script type="text/javascript">
		$(function(){
			var container = $('#content');
			var swipe = Swipe(container);
			function scrollTo(time,proportionX){
				var distX = container.width() * proportionX;
            	swipe.scrollTo(distX, time);
			}

		////////////////////////////////////////////////////////
        //=================== 动画处理 ====================== //
        ////////////////////////////////////////////////////////
    
        ///////////////
        // 小孩走路 //
        //////////////	       
        var boy = BoyWalk();
		var music = audio('./music/mysoul.mp3',1); 
		var musicBtn = $('#btn');
		musicBtn.on('click',function(){
			music.play();
            musicBtn.hide();
		})


        function startWalk(){
        	$('#sun').addClass('rotation');
        	$('.cloud:first').addClass('cloud1Anim');
        	$('.cloud:last').addClass('cloud2Anim');
        	//开始走路
        	//then(function(){
        	    	
        	boy.walkTo(2000,0.2)
        	.then(function(){
        		scrollTo(10000,1);	
        	}).then(function(){
        		return boy.walkTo(10000,0.5);
        	})
        	.then(function(){
        		boy.stopWalk();
        	}).then(function(){
        		return openDoor();
        	}).then(function(){
        		lamp.bright();
        	}).then(function(){
        		return boy.toShop(2000);
        	}).then(function(){
        		bird.fly();
        	}).then(function(){
        		return boy.takeFlower();
        	}).then(function(){
        		return boy.outShop(2000);
        	}).then(function(){
        		return closeDoor();
        	}).then(function(){
        		lamp.dark();
        	}).then(function(){
        		scrollTo(6000,2.02);
        	}).then(function(){
        		return boy.walkTo(6000,0.15);
        	}).then(function(){
        		// return boy.walkTo(1500,0.25,(bridgeY()-girl.getHeight())/visualHeight);
        		return boy.walkTo(1500,0.25,0.375);
        	}).then(function(){
        		// var proportionX = (girl.getOffset().left - boy.getWidth() + girl.getWidth() / 5) / visualWidth;
        		return boy.walkTo(1500, 0.4);
        	}).then(function(){
        		boy.resetOriginal();
        	}).then(function(){
        		setTimeout(function(){
        			girl.rotate();
        			boy.rotate(function(){
        				logo.run();
        			});
        		},1000);
        	}).then(function(){
        		snowflake();
        	});
        }
        $('#btn').click(startWalk);	
    });
    </script>
    <script type="text/javascript">
        (function(){
            var canvas = $('#canvas');
            if (!canvas[0].getContext) {
                $("#error").show();
                return false;        
            }
            var width = canvas.width();
            var height = canvas.height();        
            canvas.attr("width", width);
            canvas.attr("height", height);
            var opts = {
                seed: {
                    x: width / 2 - 20,
                    color: "rgb(190, 26, 37)",
                    scale: 2
                },
                branch: [
                    [535, 680, 570, 250, 500, 200, 30, 100, [
                        [540, 500, 455, 417, 340, 400, 13, 100, [
                            [450, 435, 434, 430, 394, 395, 2, 40]
                        ]],
                        [550, 445, 600, 356, 680, 345, 12, 100, [
                            [578, 400, 648, 409, 661, 426, 3, 80]
                        ]],
                        [539, 281, 537, 248, 534, 217, 3, 40],
                        [546, 397, 413, 247, 328, 244, 9, 80, [
                            [427, 286, 383, 253, 371, 205, 2, 40],
                            [498, 345, 435, 315, 395, 330, 4, 60]
                        ]],
                        [546, 357, 608, 252, 678, 221, 6, 100, [
                            [590, 293, 646, 277, 648, 271, 2, 80]
                        ]]
                    ]] 
                ],
                bloom: {
                    num: 700,
                    width: 1080,
                    height: 650,
                },
                footer: {
                    width: 1200,
                    height: 5,
                    speed: 10,
                }
            }

            var tree = new Tree(canvas[0], width, height, opts);
            var seed = tree.seed;
            var foot = tree.footer;
            var hold = 1;

            canvas.click(function(e) {
                var offset = canvas.offset(), x, y;
                x = e.pageX - offset.left;
                y = e.pageY - offset.top;
                if (seed.hover(x, y)) {
                    hold = 0; 
                    canvas.unbind("click");
                    canvas.unbind("mousemove");
                    canvas.removeClass('hand');
                }
            }).mousemove(function(e){
                var offset = canvas.offset(), x, y;
                x = e.pageX - offset.left;
                y = e.pageY - offset.top;
                canvas.toggleClass('hand', seed.hover(x, y));
            });

            var seedAnimate = eval(Jscex.compile("async", function () {
                seed.draw();
                while (hold) {
                    $await(Jscex.Async.sleep(10));
                }
                while (seed.canScale()) {
                    seed.scale(0.95);
                    $await(Jscex.Async.sleep(10));
                }
                while (seed.canMove()) {
                    seed.move(0, 2);
                    foot.draw();
                    $await(Jscex.Async.sleep(10));
                }
            }));

            var growAnimate = eval(Jscex.compile("async", function () {
                do {
                    tree.grow();
                    $await(Jscex.Async.sleep(10));
                } while (tree.canGrow());
            }));

            var flowAnimate = eval(Jscex.compile("async", function () {
                do {
                    tree.flower(2);
                    $await(Jscex.Async.sleep(10));
                } while (tree.canFlower());
            }));

            var moveAnimate = eval(Jscex.compile("async", function () {
                tree.snapshot("p1", 240, 0, 610, 680);
                while (tree.move("p1", 500, 0)) {
                    foot.draw();
                    $await(Jscex.Async.sleep(10));
                }
                foot.draw();
                tree.snapshot("p2", 500, 0, 610, 680);

                // 会有闪烁不得意这样做, (＞﹏＜)
                canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");
                canvas.css("background", "#ffe");
                $await(Jscex.Async.sleep(300));
                canvas.css("background", "none");
            }));

            var jumpAnimate = eval(Jscex.compile("async", function () {
                var ctx = tree.ctx;
                while (true) {
                    tree.ctx.clearRect(0, 0, width, height);
                    tree.jump();
                    foot.draw();
                    $await(Jscex.Async.sleep(25));
                }
            }));

            var textAnimate = eval(Jscex.compile("async", function () {
                var together = new Date();
                together.setFullYear(2020,3,9); 			//时间年月日
                together.setHours(17);						//小时	
                together.setMinutes(53);					//分钟
                together.setSeconds(0);					//秒前一位
                together.setMilliseconds(2);				//秒第二位

                $("#code").show().typewriter();
                $("#clock-box").fadeIn(500);
                while (true) {
                    timeElapse(together);
                    $await(Jscex.Async.sleep(1000));
                }
            }));

            var runAsync = eval(Jscex.compile("async", function () {
                $await(seedAnimate());
                $await(growAnimate());
                $await(flowAnimate());
                $await(moveAnimate());

                textAnimate().start();

                $await(jumpAnimate());
            }));

            runAsync().start();
        })();
    </script>
    <script type="text/javascript">
        $(function() {
            $('#yes').click(function(event) {
                modal('我就知道源儿你是喜欢我的。(^_^)<br/><img src="./images/a8.png" />,', function() {
                    $('.page_one').addClass('hide');
                    $('.page_two').removeClass('hide');
                    // typeWrite();
                    fireworks();
                    
                });
            });
            $('#no').click(function(event) {
                modal('明人不说暗话！', A);
            });
        });
        
        function A() {
            modal('我喜欢你！不管你是否会答应', B);
        }
        
        function B() {
            modal('我知道你在等我这一句话', C);
        }
        
        function C() {
            modal('请您不要拒绝我', D);
        }
        
        function D() {
            modal('拒绝我，不存在的', E);
        }
        
        function E() {
            modal('这辈子都不可能让你离开我，我想和你更亲密一些', F);
        }
        
        function F() {
            modal('跟我走吧，我会尽我所能给予你温暖', G);
        }
        
        function G() {
            modal('学会洗衣做饭，弄得一手好菜', H);
        }
        
        function H() {
            modal('未来的岁月里患难与共', I);
        }
        
        function I() {
            modal('爱你。么么哒！', J)
        }
        
        function J() {
            modal('行，过两年我们去民政局登记吧', function() {
                fireworks();
            });
        }
        
        function fireworks() {
            $('.page_one').addClass('hide');
            $('.page_two').removeClass('hide');
            $('.page_two').fireworks({ 
              sound: false, 
              opacity: 0.9, 
              width: '100%', 
              height: '100%' 
            });	
        }
        
        function modal(content, callback) {
            var tpl = '<div class="container2">'+
                                    '<div class="mask"></div>'+
                                    '<div class="modal">'+
                                        '<p>'+ content +'</p>'+
                                        '<button type="button" id="confirm" class="confirm">确定</button>'+
                                    '</div>'+
                                '</div>';
            $('body').append(tpl);
            $(document).on('click', '.confirm', function() {
                $('.container2').remove();
                callback();
            });
        }
        
        var myWords = '有人说，人的一生会遇到2920万人，而两个人相爱的概率只有0.000049。在这茫茫人海中，两个人能相遇就值得感激，能相爱更是一种难得。所以，我很庆幸上天让我遇见了你。我希望有个如你一般的人，能看完我写过的所有状态，读完我所有的日志，看完我从小到大的照片，试着听我喜欢的歌。如果可以，甚至陪我去我喜欢的地方，只想弥补错过你的青春。';
        var x = 0;
        var speed = 150;
        var current = 0;
        function typeWrite(){
            $('.type_words').html(myWords.substring(0, x++)+'_');
            var timer = setTimeout("typeWrite()", speed);
            if (x == myWords.length) {
                x = myWords.length;
                clearTimeout(timer)
            }
        }
        
    </script>
    
</body>
</html>